<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 600px;
        height: 600px;
        background-color: silver;
        overflow: hidden;
    }
    .box div{
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 0;
    }
    .box1{
        background-color: #bfa;
        margin-left: 0;
        /*
        指定要执行过渡的属性
            多个属性用,分隔
            所有属性都需要过渡使用all
        */
        /*transition-property: all;*/
        /*指定过渡执行的时间*/
        /*transition-duration: 2s;*/
        /*
        过渡时序函数
            ease 默认值，先加速，再减速
            linear 匀速运动
            ease-in 加速运动
            ease-out 减速运动
            ease-in-out 先加速，再减速
            cubic-bezier(n,n,n,n) 自定义 https://cubic-bezier.com
            steps(n,[n]) 分步执行
        */
        /*transition-timing-function: steps(2,start);*/
        /*
        过渡效果延迟时间
            默认值0s
        */
        /*transition-delay: 3s;*/
        /*
        可以同时设置过渡效果相关的所有属性 如果要写延迟，则两个时间第一个是持续时间
        */
        transition: 3s margin-left 1s;
    }
    /*.box:hover .box1{
        width: 200px;
        height: 200px;
        background-color: orange;
    }*/
    .box2{
        background-color: orange;
        transition-property: all;
        transition-duration: 2s;
    }
    .box:hover div{
        margin-left: 500px;
    }
</style>
<body>
<div class="box">
    <div class="box1">
    </div>
    <div class="box2"></div>
</div>
</body>
</html>
